<template>
  <el-dialog
    fontWeight="500"
    :visible.sync="showDialog"
    :before-close="handleClose"
    width="1000px"
    title="物流跟踪"
  >
<!--    发货单的tab页签-->
    <template v-if="status === 'order'">
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
        class="el-tabs__customize"
      >
          <el-tab-pane
              v-for="(item,index) in detail"
              :label="`发货单${index+1}`" :name="index.toString()" :key="index">
          </el-tab-pane>
      </el-tabs>
    </template>
    
<!--    发货单下面的内容-->
      <invoice ref="invoice" :detail="detail[active]"></invoice>

  </el-dialog>
</template>
<script>
import invoice from "./invoice";
export default {
  name: "logisticsTracking",
  components: {
    invoice
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default() {
        return false;
      }
    },
    detail: {
      type: Array,
      default() {
        return []
      }
    },
    status:{
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      showDialog: false,
      activeName: "0"
    };
  },
  computed:{
    active(){
      return parseInt(this.activeName)
    }
  },
  mounted() {
  },
  methods: {
    // 切换发货单
    handleClick(tab, event) {
      // console.log(tab, event);
      console.log("activeName",this.activeName)
    },
    // 关闭弹窗
    handleClose(done){
      done()
    }
  },
  watch: {
    dialogVisible() {
      this.showDialog = this.dialogVisible;
    },
    showDialog(e) {
      console.log("showDialog", e);
      if (!e) {
        this.$emit("update:dialogVisible", false);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
/deep/.el-single-select
  .el-dialog__wrapper
  .el-dialog
  .el-dialog__body
  .el-dialog-box
  .dialog-top {
  justify-content: space-between;
}
/deep/ .el-table__body-wrapper {
  max-height: 230px !important;
}
/deep/.label {
  display: inline-block;
  width: 130px !important;
  text-align: right;
}
.form-longInput {
  width: 240px;
}
</style>
